function Page(el, options = {}) {
    //公共属性
    this.el = document.querySelector(el)
    this.options = options
    //调用
    this.init()
}
Page.prototype.init = function () {
    //1-创建分页标签、首页/上一页/下一页/尾页
    this.createTag()
    //创建一个父标签
    this.parentTag()
    //2-绑定点击事件(给父盒子绑定[事件委托])
    this.bindEvent()

}

//创建分页标签、首页/上一页/下一页/尾页
Page.prototype.createTag = function () {
    //先清空盒子中的数据
    this.el.innerHTML = ''
    //1-获取第二个实参中的pageTag对象 遍历
    //console.log(this.options.pageTag);
    for (let key in this.options.pageTag) {
        /* let pObj = document.createElement('p')
        pObj.innerText = this.options.pageTag[key]
        pObj.style.border = '1px solid black'
        pObj.style.margin = '0 5px'
        pObj.style.padding = '0 5px'
        pObj.style.display = 'inline-block'
        this.el.appendChild(pObj)   //追加到父 */

        //调用写法：创建标签类型，内容，父
        this.createAppend('p', this.options.pageTag[key], this.el)
    }
    //创建页码(必须在createTag里 原因：先标签后页码)
    this.createNum()
}

//封装追加标签方法
Page.prototype.createAppend = function (tagName, content, fatherObj) {
    //形参：标签名，内容，需要追加的父元素
    //创建标签
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = '1px solid black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'

    //添加默认选中样式  默认选中由html中的pageNum控制  content[i]==页码时为选中
    if (content == this.options.pageInfo.pageNum) {
        pObj.style.background = 'dodgerblue'
    }

    fatherObj.appendChild(pObj)   //追加到父

    /* //创建页码(保留一个即可)
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = '1px solid black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    box.appendChild(pObj) */
}

//父盒子样式
Page.prototype.parentTag = function () {
    this.el.style.display = 'flex'
    this.el.style.justifyContent = 'center'
    this.el.style.alignItems = 'center'
}

//创建页码标签
Page.prototype.createNum = function () {
    //获取到第三个标签
    let box = this.el.querySelector('p:nth-child(3)')
    box.style.border = 'none'
    box.style.margin = '0'
    box.style.padding = '0'
    /* //for循环创建固定页码   代码冗余(封装)
    for (let i = 1; i < 6; i++)
    let pObj = document.createElement('p')
    pObj.innerText = i
    pObj.style.border = '1px solid black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    //将2追加到1中
    box.appendChild(pObj) 
    //创建标签类型，内容，父
    this.createAppend('p', i, box)
    let pageNum = this.options.pageInfo.pageNum */

    //算法创建变化页码
    //获取当前页数
    let pageNum = this.options.pageInfo.pageNum
    //计算总共需要多少页数[总页数=向上取整(总条数/每页显示条数)]
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    //获取总页数
    let totalPage = this.options.pageInfo.totalPage
    //移动到最前和最后以后首页尾页不能用
    let pObjs = this.el.querySelectorAll('p')
    if (pageNum == 1) {
        pObjs[0].style.cursor = 'not-allowed'
        pObjs[1].style.cursor = 'not-allowed'
    }
    if (pageNum == totalPage) {
        pObjs[3].style.cursor = 'not-allowed'
        pObjs[4].style.cursor = 'not-allowed'
    }
    if (totalPage < 7) {
        for (let i = 1; i <= totalPage; i++) this.createAppend('p', i, box)
    } else if (pageNum < 5) {        //判断当前页数
        for (let i = 1; i <= 5; i++) this.createAppend('p', i, box)
        this.createAppend('p', '...', box)
        this.createAppend('p', totalPage - 1, box)
        this.createAppend('p', totalPage, box)
    } else if (pageNum == 5) {
        for (let i = 1; i <= 7; i++) this.createAppend('p', i, box)
        this.createAppend('p', '...', box)
        this.createAppend('p', totalPage - 1, box)
        this.createAppend('p', totalPage, box)
    } else if (pageNum > 5 && pageNum < totalPage - 4) {
        for (let i = 1; i <= 2; i++) this.createAppend('p', i, box)
        this.createAppend('p', '...', box)
        this.createAppend('p', pageNum - 2, box)
        this.createAppend('p', pageNum - 1, box)
        this.createAppend('p', pageNum, box)
        this.createAppend('p', pageNum + 1, box)
        this.createAppend('p', pageNum + 2, box)
        this.createAppend('p', '...', box)
        this.createAppend('p', totalPage - 1, box)
        this.createAppend('p', totalPage, box)
    } else if (pageNum >= totalPage - 4) {
        for (let i = 1; i <= 2; i++) this.createAppend('p', i, box)
        this.createAppend('p', '...', box)
        for (let i = totalPage - 4; i <= totalPage; i++) this.createAppend('p', i, box)

    }
}

//给盒绑定事件
Page.prototype.bindEvent = function () {
    //获取当前盒子绑定点击事件
    this.el.onclick = (e) => {
        //事件处理函数中 1-获取事件对象  
        let evt = e || window.event
        //2-获取操作的标签，判断(标签名)
        let target = evt.target || evt.srcElement
        //console.log(target); 
        if (target.nodeName === 'P') {
            //隐藏的P 里面有HTML ... 数字
            switch (target.innerText) {
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    break;
                case this.options.pageTag.prev:
                    if (this.options.pageInfo.pageNum==1) return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    if (this.options.pageInfo.pageNum==this.options.pageInfo.totalPage) return
                    this.options.pageInfo.pageNum++
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                    break;
                default:
                    if (parseInt(target.innerHTML)>0) {
                        //不能直接赋值；原因：只要从页面获取的都是字符串
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                    }
                    break;
            }
            //清空分页数据 重新创建
            this.createTag()
            this.options.callback(this.options.pageInfo.pageNum)
        }
    }
}


























